@extends('layouts.layouts')
@section('title')
    <title>banner管理</title>
    <style>
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }
        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }
        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
    </style>
@endsection
@section('content')
<script src="/js/upload.js" type="text/javascript"></script>
    <div class="modal small fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3 id="myModalLabel">Delete Confirmation</h3>
                </div>
                <div class="modal-body">
                    <p class="error-text"><i class="fa fa-warning modal-icon"></i>Are you sure you want to delete the user?<br>This cannot be undone.</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
                    <button class="btn btn-danger" data-dismiss="modal">Delete</button>
                </div>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="header">
            <h1 class="page-title">pt后台管理</h1>
            <ul class="breadcrumb">
                <li><a href="/banner/list">banner列表</a> </li>
                <li class="active">添加banner</li>
            </ul>
        </div>
        <div class="main-content">
            <ul class="nav nav-tabs">
              <li class="active"><a href="#home" data-toggle="tab">信息</a></li>
              <!-- <li><a href="#profile" data-toggle="tab">Password</a></li> -->
            </ul>

          <div class="row">
            <div class="col-md-4">
              <br>
              <div id="myTabContent" class="tab-content">
                <div class="tab-pane active in" id="home">
               
                    <!-- <form id="uploadForm" action="{{url('uploads')}}" method="post""> -->
                      <div class="form-group js-reset-image">
                        <!-- <label>添加图片</label> -->
                        <!-- <input type="button" value="上传图片" class="btn btn-primary upload-text on" /> -->
                        <!-- <input type="button" value="上传图片" class="btn btn-primary re-upload-text" /> -->
                        <a href="javascript:;" class="file">上传封面图(750X300)
                                        <input type="file" class="upload_img cover" name="coverUrl" placeholder="封面图">
                                    </a>
                        <img src="" style="width:50%;margin-left: 10px;" id="banner_url" />
                        <span id="error"></span>
                      </div>
                      {{csrf_field()}}
                    <!--  <input style="display: none;" name="image" type="file" class="inputFile" />
                     </form>  -->
                   <form id="tab2" action="/tags/uptag" method="post">    
                      <div class="form-group">
                        <label>banner标题</label>
                        <input type="text" value="" name="title" class="form-control">
                      </div>
                      <div class="form-group">
                        <label>banner跳转地址</label>
                        <input type="text" value="" name="link" class="form-control">
                      </div>
                      <div class="form-group">
                        <label>排序值(从大到小)</label>
                        <input type="number" value="" name="order_by" class="form-control">
                      </div>
                      <div class="form-group">
                        <label>banner类别</label>
                        <select class="form-control" name="type">
                            <option value="COURSE">{{App\Contant\CommonType::COURSE}}</option>
                            <option value="ARTICLE">{{App\Contant\CommonType::ARTICLE}}</option>
                            <option value="CIRCLE">{{App\Contant\CommonType::CIRCLE}}</option>
                        </select>
                      </div>
                      <div class="form-group">
                        <label>banner状态</label>
                          <label class="checkbox-inline">
                            <input type="radio" id="inlineCheckbox1" value="1" name="state" checked="true"> 上线
                          </label>
                          <label class="checkbox-inline">
                            <input type="radio" id="inlineCheckbox2" value="0" name="state"> 禁用
                          </label>
                        </div>
                      <div class="form-group">
                        <label>seo关键字</label>
                        <input type="text" value="" name="keyword" class="form-control">
                      </div>
                      <div class="form-group">
                        <label>seo描述</label>
                        <input type="text" value="" name="description" class="form-control">
                      </div>
                      <!-- <div class="form-group">
                          <label>标签状态</label>
                          <label class="checkbox-inline">
                            <input type="radio" id="inlineCheckbox1" value="1" name="state"> 上线
                          </label>
                          <label class="checkbox-inline">
                            <input type="radio" id="inlineCheckbox2" value="0" name="state" checked="true"> 禁用
                          </label>
                      </div> -->
                    <br/>
                    <div class="form-group">
                      {{csrf_field()}}
                      <input type="hidden" name="banner_url" id="input_banner_url" />
                      <button type="button" class="btn btn-primary" id="submit_form_add">提交</button>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>    
        </div>
    </div>

    <script type="text/javascript">
       
      var imgUrl = '{{env('IMG_URL')}}';  
      $(function (e) {

          $("#uploadForm").on('submit', function(e){
              
              e.preventDefault();
              $.ajax({
                  url: "{{url('banner/uploads')}}",
                  type: "POST",
                  data:  new FormData(this),
                  contentType: false,
                  cache: false,
                  processData: false,
                  // 显示加载图片
                  beforeSend: function () {
                      $('.loading-shadow').addClass('active');
                  },
                  success: function (data) {
                    console.log(data);
                      // 移除loading加载图片
                      $('.loading-shadow').removeClass('active');
                      // 看我接下来的解释
                      $('#banner_url').attr('src', imgUrl + data.msg);
                      $('#input_banner_url').val(data.msg);
                      // 更换上传提示文本为重新上传
                      $('.upload-text').removeClass('on');
                      $('.re-upload-text').addClass('on');
                  },
                  error: function(){}             
              });
          });
       
          // 选择完要上传的文件后, 直接触发表单提交
          $('input[name=image]').on('change', function () {
              // 如果确认已经选择了一张图片, 则进行上传操作
              if ($.trim($(this).val())) {
                  $("#uploadForm").trigger('submit');
              }
          });
       
          // 触发文件选择窗口
          $('.js-reset-image input').on('click', function () {
              $('input[name=image]').trigger('click');
          });
      });

      $(".upload_img").UploadImg({
            url : '/course/fileUpload',
            // width : '320',
            //height : '200',
            quality : '0.8', //压缩率，默认值为0.8
            // 如果quality是1 宽和高都未设定 则上传原图
            mixsize : '10000000',
            //type : 'image/png,image/jpg,image/jpeg,image/pjpeg,image/gif,image/bmp,image/x-png',
            before : function(blob,className){
//                var className = '#'+className;
//                $(className).attr('src',blob);
            },
            error : function(res){
                $('#img').attr('src','');
                $('#error').html(res);
            },
            success : function(url,className){
                console.log(url);
                $('#banner_url').attr('src', imgUrl + url);
                $('#input_banner_url').val( url);
            }
        });
    </script>
    
    <script type="text/javascript">
        $(document).ready(function(){
            //提交信息
            $("#submit_form_add").click(function(){
                var data = $("#tab2").serialize();
                data = decodeURIComponent(data,true);
                
                $.ajax({
                    type:"POST",
                    url:"/banner/insert",
                    data:data,
                    dataType:'json',
                    success:function(result){
                        console.log(result);
                        if(result.code==1){
                            location.href='/banner/list';
                        }else{
                            alert(result.msg);
                        }
                    }
                });
            });
        })
    </script>
@endsection